<template>
  <div>
    <MyTable :arr=list>
    <template #header> 
       <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
    </template>
    <template #body="scope"> 
       <td>{{scope.row.id}}</td>
        <td>{{scope.row.goods_name}}</td>
        <td>{{scope.row.goods_price}}</td>
        <td>
          <input
          class="tag-input form-control"
          style="width: 100px;"
          type="text"
          v-if="scope.row.inputVisible"
          v-model="scope.row.inputValue"
          v-focus
          @blur="scope.row.inputVisible = false"
          @keydown.enter="enterFn(scope.row)"
          @keydown.esc="scope.row.inputValue=''"
          />
          <button 
          v-else 
          style="display: block;" 
          class="btn btn-primary btn-sm add-tag"
          @click="scope.row.inputVisible = true"
          >+Tag</button>
          <span v-for="(str,index) in scope.row.tags" :key="index"
               class="badge bg-warning">
            {{str}}
          </span>
        </td>
        <td> <button class="btn btn-danger btn-sm"
        @click="delFn(scope.row.id)">删除</button></td>
    </template>

    </MyTable>
  
  </div>
</template>

<script>
import MyTable from "../components/MyTable..vue"
export default {
components:{
  MyTable
},
data(){
  return{
    list:[]
  }
},
created(){
  this.$axios({
    url:"/api/goods"
  }).then((res)=>{
  this.list=res.data.data
    
  }).catch((err)=>{
    console.log(err);
    
  })
},
methods:{
  delFn(id){
  this.list=this.list.filter(item=>item.id !==id)
},
  enterFn(obj){
    // console.log(obj.inputValue);
    
  if(obj.inputValue.trim().length===0){
       alert('不能为空哦亲~')
       return
    }
    obj.tags.push(obj.inputValue)
    obj.inputValue=''
  }
   }
}
</script>

<style lang="less" scoped>
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
</style>